<template>
	<div class="extend-action-timeline" :id="id">
		<div class="extend-action-timeline-table">
			<div class="extend-action-timeline-thead"></div>
			<div class="extend-action-timeline-body" v-if="data && data.usertasks">
				<div
					class="timeline-draw extend-action-timeline-body__timeline timeline-head"
				>
					<div class="timeline-wrapper">
						<div class="timeline-wrapper__timeline-index">
							{{ $t('common.timeline.index') }}
						</div>
						<div class="timeline-wrapper__usertaskname">
							{{ $t('common.timeline.node') }}
						</div>
						<div class="timeline-wrapper__authorname">
							{{ $t('common.timeline.author') }}
						</div>
						<div class="timeline-wrapper__type">
							{{ $t('common.timeline.type') }}
						</div>
						<div class="timeline-wrapper__last-time">
							{{ $t('common.timeline.lasttime') }}
						</div>
						<div class="timeline-wrapper__fullmessage">
							{{ $t('common.timeline.opinion') }}
						</div>
					</div>
					<div class="timeline-arrow"></div>
				</div>
				<template
					v-for="(usertask, usertaskIndex) in data.usertasks"
					:key="usertaskIndex"
				>
					<div v-if="usertask.comments.length > 0" class="timeline-content">
						<div class="extend-action-timeline-body__timeline">
							<div class="timeline-wrapper">
								<div class="timeline-wrapper__timeline-index">
									<span>{{ usertask.index }}</span>
									<div class="icon-bottom" v-if="usertask.index != 1">
										<i class="fa fa-long-arrow-down"></i>
									</div>
									<div
										class="icon-top"
										v-if="usertask.index < usertasksLength"
									></div>
								</div>
								<div class="timeline-wrapper__usertaskname">
									{{ usertask.userTaskName }}
								</div>
								<div class="timeline-wrapper__authorname">
									<a-tooltip placement="bottom">
										<template
											v-if="
												acceptingOfficerNodup('authorName', usertask.comments)
													.length > 1
													? true
													: false
											"
											#title
										>
											<div class="timeline-wrapper__authorname__tooltips">
												<div
													class="tooltips-content"
													v-for="(item, toolindex) in acceptingOfficerNodup(
														'authorName',
														usertask.comments
													)"
													:key="toolindex"
												>
													{{ item }}
												</div>
											</div>
										</template>
										<span>{{
											acceptingOfficerNodup('authorName', usertask.comments)
												.map((item) => item)
												.toString()
										}}</span>
									</a-tooltip>
								</div>
								<div class="timeline-wrapper__type">
									<div
										v-if="
											usertask.comments[usertask.comments.length - 1] &&
											usertask.comments[usertask.comments.length - 1].type
										"
										class="dot"
									></div>
									<span>
										{{
											usertask.comments[usertask.comments.length - 1] &&
											usertask.comments[usertask.comments.length - 1].type
										}}
									</span>
								</div>
								<div class="timeline-wrapper__last-time">
									{{
										usertask.comments[usertask.comments.length - 1] &&
										formatDate(
											usertask.comments[usertask.comments.length - 1].time,
											'MM月DD日 HH:mm:ss'
										)
									}}
								</div>
								<a-popover
									class="timeline-wrapper__tooltip"
									placement="top"
									:overlayStyle="{ width: '500px' }"
								>
									<span>
										{{
											usertask.comments[usertask.comments.length - 1] &&
											usertask.comments[usertask.comments.length - 1]
												.fullMessage
										}}
									</span>
									<template #content>
										{{
											usertask.comments[usertask.comments.length - 1] &&
											usertask.comments[usertask.comments.length - 1]
												.fullMessage
										}}
									</template>
								</a-popover>
							</div>
							<div
								v-if="
									usertask.comments.length > 1 ||
									usertask.identitylinks.length > 0
								"
								class="timeline-arrow"
								@click="changeExpand(usertask)"
							>
								<MinusOutlined v-if="usertask.isShow" />
								<PlusOutlined v-else />
							</div>
						</div>
						<div v-if="usertask.isShow">
							<template
								v-for="(comment, index) in usertask.comments"
								:key="index"
							>
								<div
									class="timeline-draw extend-action-timeline-body__timeline"
								>
									<div class="timeline-wrapper">
										<div class="timeline-wrapper__timeline-index">
											<div
												v-if="usertask.index < usertasksLength"
												class="icon-line"
											></div>
										</div>
										<div class="timeline-wrapper__usertaskname"></div>
										<div class="timeline-wrapper__authorname">
											{{ comment.authorName }}
										</div>
										<div class="timeline-wrapper__type">
											<div class="dot"></div>
											<span>{{ comment.type }}</span>
										</div>
										<div class="timeline-wrapper__last-time">
											{{ formatDate(comment.time, 'MM月DD日 HH:mm:ss') }}
										</div>
										<div class="timeline-wrapper__fullmessage">
											{{ comment.fullMessage }}
										</div>
									</div>
									<div class="timeline-arrow"></div>
								</div>
							</template>
							<div
								v-if="usertask.identitylinks.length > 0"
								class="timeline-draw extend-action-timeline-body__timeline"
							>
								<div class="timeline-wrapper">
									<div class="timeline-wrapper__timeline-index">
										<div
											v-if="usertask.index < usertasksLength"
											class="icon-line"
										></div>
									</div>
									<div class="timeline-wrapper__usertaskname">
										{{ $t('components.timeline.inhand') }}
									</div>
									<div class="timeline-wrapper__authorname">
										<div
											v-for="(identitylink, index) in usertask.identitylinks"
											:key="index"
										>
											{{ identitylink.displayname }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div v-else class="timeline-content">
						<div class="extend-action-timeline-body__timeline">
							<div class="timeline-wrapper">
								<div class="timeline-wrapper__timeline-index">
									<span>{{ usertask.index }}</span>
									<div class="icon-bottom" v-if="usertask.index != 1">
										<i class="fa fa-long-arrow-down"></i>
									</div>
									<div
										class="icon-top"
										v-if="usertask.index < usertasksLength"
									></div>
								</div>
								<div class="timeline-wrapper__usertaskname">
									{{ usertask.userTaskName }}
								</div>
								<div class="timeline-wrapper__authorname">
									<a-tooltip placement="bottom">
										<template
											v-if="
												acceptingOfficerNodup(
													'displayname',
													usertask.identitylinks
												).length > 1
													? true
													: false
											"
											#title
										>
											<div class="tooltips">
												<div
													class="tooltips-content"
													v-for="(item, toolindex) in acceptingOfficerNodup(
														'displayname',
														usertask.identitylinks
													)"
													:key="toolindex"
												>
													{{ item }}
												</div>
											</div>
										</template>
										<span>
											{{
												acceptingOfficerNodup(
													'displayname',
													usertask.identitylinks
												)
													.map((item) => item)
													.toString()
											}}
										</span>
									</a-tooltip>
								</div>
							</div>
							<div
								v-if="usertask.identitylinks.length > 1"
								class="timeline-arrow"
								@click="changeExpand(usertask)"
							>
								<MinusOutlined v-if="usertask.isShow" />
								<PlusOutlined v-else />
							</div>
						</div>
						<div v-if="usertask.isShow">
							<template
								v-for="(identitylink, index) in usertask.identitylinks"
								:key="index"
							>
								<div
									class="timeline-draw extend-action-timeline-body__timeline"
								>
									<div class="timeline-wrapper">
										<div class="timeline-wrapper__timeline-index">
											<div
												v-if="usertask.index < usertasksLength"
												class="icon-line"
											></div>
										</div>
										<div class="timeline-wrapper__usertaskname"></div>
										<div class="timeline-wrapper__authorname">
											{{ identitylink.displayname }}
										</div>
									</div>
									<div class="timeline-arrow"></div>
								</div>
							</template>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { extendActionTimelineProps } from './extend-action-timeline';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { deepCopy, IHttpResponse, IParam, createUUID } from '@/core';
import { Ref } from 'vue';
import { format as formatFns } from 'date-fns';
import { parseISO } from 'date-fns';

const props = defineProps(extendActionTimelineProps);

const id: string = createUUID();

const data: Ref<IParam | null> = ref(null);

let usertasksIndex = 1;

const usertasksLength: Ref<number> = ref(1);

const initUIStateData = (tempData: any) => {
	if (tempData && tempData.usertasks) {
		usertasksIndex = 1;
		for (let index in tempData.usertasks) {
			tempData.usertasks[index].isShow = false;
			tempData.usertasks[index].index = usertasksIndex;
			usertasksIndex++;
		}
		usertasksLength.value = usertasksIndex - 1;
	}
	data.value = tempData;
};

const formatDate = (date: string, format: string): string => {
	const tempFormat = format.replaceAll('Y', 'y').replaceAll('D', 'd');
	return formatFns(parseISO(date), tempFormat);
};

const changeExpand = (usertask: IParam) => {
	usertask.isShow = !usertask.isShow;
};

const acceptingOfficerNodup = (tag: string, items: IParam[]): IParam[] => {
	let tempItems: IParam[] = [];
	if (items.length > 0 && tag) {
		items.forEach((item: IParam) => {
			tempItems.push(item[tag]);
		});
	}
	tempItems = [...new Set(tempItems)];
	return tempItems;
};

const load = async () => {
	try {
		const entityService = await App.getDataService(
			props.appEntityCodeName,
			props.context
		);
		props.pLoadingHelper.beginLoading(id);
		const response: IHttpResponse = await entityService.GetWFHistory(
			props.context
		);
		if (response && response.success) {
			const data = deepCopy(response.data);
			initUIStateData(data);
		}
		props.pLoadingHelper.endLoading();
	} catch (error) {
		props.pLoadingHelper.endLoading();
	}
};

load();
</script>
